<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="navtop">
		    <u-navbar title="优惠劵管理">
		        <view slot="right" class="navtop-right" @click="link('/pages/user/coupon_form')">
					<u-icon name="plus-circle" size="20px"></u-icon>
					<text>创建优惠劵</text>
				</view>
		    </u-navbar>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list">
				<view class="desc">
					<view class="tit">优惠劵名称：{{item.couponName}}</view>
					<u-row gutter="10">
						<u-col span="5">
							<view class="text">
							优惠金额：{{item.couponPrice}}
							</view>
						</u-col>
						<u-col span="7">
							<view class="text" v-if="item.isThreshold">
							使用门槛：无门槛
							</view>
							<view class="text" v-else>
							使用门槛：满{{item.min}}元可用
							</view>
						</u-col>
						<u-col span="5">
							<view class="text">
							发行数量：{{item.number}}
							</view>
						</u-col>
						<u-col span="7">
							<view class="text">
							有效期：{{item.startTime}}至{{item.endTime}}
							</view>
						</u-col>
					</u-row>
					<view class="date">创建时间：{{item.createTime}}</view>
				</view>
				<view class="btnbox">
					<view class="left">
						<text>上架：</text>
						<u-switch v-model="item.isGround" @change="switchChange($event,item, index)" :loading="item.isLoading" active-color="#497CD0"></u-switch>
					</view>
					<view class="right" @click="link(`/pages/user/coupon_form?id=${item.id}`)">
						<image src="@/static/edit.png" class="icon" mode="widthFix"></image>
						<text>编辑</text>
					</view>
				</view>
			</view>
		</view>
		
		<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
		    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
		</list-tip>
		
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            // ready: true,
			btnStyle:{
				background: '#497CD0',
				borderRadius: '14px',
				padding:'0 15px',
				width:"140rpx"
			},
			listTip: {},
			list:[],
        };
    },
    onLoad() {
        that = this;
    },
    onReady() {
    },
    onShow() {
       this.$list.init(this);
       this.getList();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
		this.$list.onReachBottom(this)
	},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async switchChange(e, item, index){
			console.log(e);
			this.$set(item, 'isLoading', true)
			const res = await this.$api.agencyCouponEdit({
				...item,
				isGround: e ? 1 : 0,
			 });
			 if (res.data.code == this.$config.RESOK) {
				this.$set(item, 'isLoading', false)
				// this.$message.success(res.data.msg);
			 } else{
				this.$message.error(res.data.msg);
			 }
		},
		async getList() {
		    let listTip = this.listTip;
		    let res = {};
		    let params = {
		        pageNum: listTip.p,
		        pageSize: listTip.size,
		    };
		    try {
		        res = await this.$api.agencyCouponList(params);
		    } catch (e) {
		        uni.hideLoading();
		        console.log('err', e);
		    }
		    if (res.data.code == this.$config.RESOK) {
		        let list = res.data.data || [];
				list.forEach(item=>{
					item.isLoading = false;
					item.isGround = item.isGround ? true : false
				})
		        let setdata = this.$list.normalData(list, this);
				console.log(setdata);
		        this.list = setdata.list;
		        this.listTip = setdata.listTip;
		        if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
		            this.$list.notdata(this);
		        } 
		    }
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #f5f5f5;
}
.list{
	padding: 20rpx 30rpx 0;
	.tit{
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.item{
		margin-bottom: 20rpx;
		border-radius: 12px;
		padding: 0 30rpx;
		background: #fff;
		&:nth-last-child(1){
			margin: 0;
		}
	}
	.desc{
		padding: 20rpx 0;
	}
	.text{
		font-size: 12px;
		padding: 3px 0;
	}
	.date{
		color: #999;
		font-size: 12px;
	}
	.btnbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-top: 1px solid #eee;
		.right{
			display: flex;
			align-items: center;
			color: $color;
			.icon{
				width: 20px;
				height: 20px;
			}
			text{
				margin-left: 5px;
			}
		}
		.left{
			display: flex;
			align-items: center;
		}
	}
}

.navtop-right{
	color: $color;
	display: flex;
	align-items: center;
}
</style>
